<template>
	<view class="littel-video-detail">
		<image :src="videoVal.video?.imgUrl" mode="" class="poster-bg" ref="imgNone" />
		<video :src="videoVal.video?.url" class="xsp" @click.stop="paused" :controls="false"
			:show-center-play-btn="false" @ended="endHandler"></video>
		<view class="right-wrapper">
			<view class="right-item">
				<image :src="videoVal.user.avatarurl" mode="" class="header-pic" />
			</view>
			<view class="right-item">
				<view class="icon-btn">
					<image src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png" mode="" />
				</view>
				<view class="text">
					{{count}}
				</view>
			</view>
			<view class="right-item">
				<view class="icon-btn">
					<image src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png" mode="" />
				</view>
				<view class="text">
					评论
				</view>
			</view>
			<view class="right-item">
				<view class="icon-btn">
					<image src="https://p0.meituan.net/moviemachine/7e7aaf09a232efb02ff8697deb522d151367.png" mode="" />
				</view>
				<view class="text">
					分享
				</view>
			</view>
		</view>
		<view class="play-btn" :class="{hide:isShow}" @click.stop="paused">
		</view>
		<view class="info-wrapper">
			<view class="title">{{videoVal.title}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'


	const videoVal = ref({})
	onLoad((option) => {
		const item = JSON.parse(decodeURIComponent(option.item));
		videoVal.value = item
		console.log(videoVal.value, 'item');
	})

	const isShow = ref(false)

	const imgNone = ref();

	const videos = document.getElementsByTagName('video')

	const paused = () => {
		imgNone.value.$el.style.display = 'none'
		if (!isShow.value) {
			videos[0].play()
			isShow.value = true

		} else {
			videos[0].pause()
			console.log(videos[0].paused, 'paused');
			console.log(videos[0].pause);
			isShow.value = false
		}
	}

	const endHandler = () => {
		console.log(123);
		isShow.value = true
	}

	const count = computed(() => {
		return videoVal.value.upCount > 0 ? videoVal.value.upCount : "点赞"
	})
</script>

<style lang="scss" scoped>
	.littel-video-detail {
		width: 100%;
		position: relative;

		.play-btn {
			position: absolute;
			width: 120rpx;
			height: 120rpx;
			background: url(https://p1.meituan.net/moviemachine/1602ab135634e5c1e42ef8866bd524c54993.png) no-repeat;
			background-size: 100% 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 110;

			&.hide {
				display: none;
			}
		}
	}


	.poster-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
	}

	.xsp {
		width: 100%;
		height: 93vh;
		background-color: #000;
		object-fit: contain;
	}

	.info-wrapper {
		color: #fff;
		letter-spacing: 0;
		line-height: 60rpx;
		text-shadow: 0 0 6rpx rgba(0, 0, 0, .3);
		width: 564rpx;
		position: absolute;
		bottom: 142rpx;
		left: 30rpx;
		z-index: 100;

		.title {
			font-size: 38rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-bottom: 2rpx;
		}
	}

	.right-wrapper {
		position: absolute;
		right: 30rpx;
		bottom: 116rpx;
		width: 96rpx;
		display: flex;
		flex-direction: column;
		z-index: 101;

		.right-item {

			.header-pic {
				width: 96rpx;
				height: 96rpx;
				border-radius: 100%;
				margin-bottom: 40rpx;
			}

			.icon-btn {
				width: 96rpx;
				height: 96rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(0, 0, 0, .42);
				border-radius: 100%;
				margin-bottom: 8rpx;


				image {
					width: 43rpx;
					height: 43rpx;
				}
			}

			.text {
				margin-bottom: 28rpx;
				font-size: 28rpx;
				color: #fff;
				letter-spacing: 0;
				text-align: center;
				text-shadow: 0 0 6rpx rgba(0, 0, 0, .5);
			}
		}
	}

	::v-deep .uni-video-cover {
		background-color: rgba(1, 1, 1, 0.2) !important;

	}

	::v-deep .uni-video-cover-duration {
		display: none !important;
	}

	::v-deep .uni-video-cover-play-button {
		border: 2rpx solid #f2f2f2 !important;
		border-radius: 50% !important;
	}
</style>